<template>
  <div class="">
    <div class="header">
      <header>
        <h3 class="cll_h3">运营成本管理</h3>
      </header>
      <button class="button" @click.prevent>新增</button>
    </div>
    <hr>
    <!-- 筛选 -->
    <el-form :inline="true" :model="message" class="demo-form-inline">
      <span class="formtitle">筛选：</span>
      <el-form-item size="small" >
        <el-select placeholder="全部"  v-model="message.site" >
          <el-option label="全部" value="全部" />
          <el-option label="加工中心" value="加工中心" />
          <el-option label="实体店" value="实体店" />
          <el-option label="办公室" value="办公室" />
        </el-select>
      </el-form-item>
      <el-form-item size="small" >
        <el-select placeholder="全部"  v-model="message.name" >
          <el-option label="全部" value="全部" />
          <el-option label="房租" value="房租" />
          <el-option label="工资" value="工资" />
          <el-option label="水电" value="水电" />
          <el-option label="社保" value="社保" />
          <el-option label="杂费" value="杂费" />
          <el-option label="推广" value="推广" />
        </el-select>
      </el-form-item>
      <el-form-item size="small">
        <el-select placeholder="全部"   v-model="message.type">
          <el-option label="全部" value="全部" />
          <el-option label="一个月" value="一个月" />
          <el-option label="半年" value="半年" />
          <el-option label="一年" value="一年" />
        </el-select>
      </el-form-item>
      <el-form-item size="small">
        <el-date-picker type="datetime" placeholder="起始时间"   v-model="message.toTime"/>
        <span class="zhi">至</span>
        <el-date-picker type="datetime" placeholder="截止时间"  v-model="message.fromTime" />
      </el-form-item>
      <el-form-item size="small">
        <button class="button" @click.prevent>筛选</button>
      </el-form-item>
    </el-form>
    <hr>
    <!-- 退款订单表格 -->
    <el-table ref="multipleTableRef"  border :data="tableData" style="width: 100%" >
      <el-table-column label="使用场景" width="180" align="center">
        <template #default="scope">{{ scope.row.number }}</template>
      </el-table-column>
      <el-table-column property="cuisine" label="费用类型" width="190" align="center" />
      <el-table-column property="refund" label="单位时间" align="center" show-overflow-tooltip width="190" />
      <el-table-column property="location" label="金额" align="center" show-overflow-tooltip width="190" />
      <el-table-column property="payment" label="添加时间" align="center" show-overflow-tooltip width="190" />
      <el-table-column property="order" label="添加人" align="center" show-overflow-tooltip width="190" />
      <el-table-column property="name" label="备注信息（选填）" align="center" show-overflow-tooltip width="190" />
    
    </el-table>
    <div class="pagebox"><el-pagination 
      background 
      layout="prev, pager, next" 
      :total="5" 
      :default-page-size="7"
      /></div>
  </div>
</template>

<script  lang="ts">
export default {
  name: '',
  data() {
    return {
      message: {
        site:'',
        type:'',
        toTime:'',
        fromTime:'',
        name:'',
      },
      tableData: [
        {
          number: '办公室',
          cuisine: '工资',
          refund: '半年',
          location: 30000,
          payment: '2022-09-15',
          order: '李大宝',
          name: '无',
         
        },
        {
          number: '加工中心',
          cuisine: '房租',
          refund: '一个月',
          location: 10000,
          payment: '2022-07-15',
          order: '李大宝',
          name: '无',
         
        },
        {
          number: '实体店',
          cuisine: '水电',
          refund: '一年',
          location: 25900,
          payment: '2022-06-15',
          order: '李大宝',
          name: '无',
         
        },
        
      ],
    }
  },
}
</script>

<style scoped lang="less">
// 头部
.header {
  display: flex;
  justify-content: space-between;
}

header {
  display: flex;
  align-items: flex-end;

  .head1 {
    width: 202px;
    height: 38px;
    background-color: #999;
    font-size: 18px;
  }

  .head2 {
    width: 202px;
    height: 50px;
    background-color: #888;
    font-size: 20px;
    font-weight: bold;
  }

  .head3 {
    width: 202px;
    height: 38px;
    background-color: #ccc;
    font-size: 16px;
  }

  .head1,
  .head2,
  .head3 {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;

  }
}

.button {
  border: none;
  background-color: rgba(153, 153, 153, 1);
  color: #fff;
  width: 78px;
  height: 27px;
}

//表单
.formtitle {
  position: relative;
  top: -7px;
}

.zhi {
  position: relative;
  left: -17px;
}

// 表格
.audit{
  margin: 0 10px;
}
.pagebox{
  display: flex;
  justify-content: center;
  position: fixed;
  bottom: 30px;
  left: 0;
  right: 0;
  margin: auto;
}
</style>
